<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress {
            width: 288.5px;
            height: 50px;
            background-color: #f00;
            border: 5px solid #000;
            position: relative;
        }

        p {
            width: 300px;
            height: 50px;
            text-align: center;
            position: absolute;
        }

        .inner {
            /* width: 30px; */
            height: 50px;
            position: absolute;
            top: 0;
            background-color: #ff0;
        }
    </style>
</head>

<body>

    <div class="progress">
        <div class="inner"></div>
        <p>1%</p>
    </div>

    <script>

        var oProgress = document.querySelector('.progress');
        var oInner = oProgress.querySelector('.inner');
        var oP = oProgress.querySelector('p');

        var _width = oProgress.clientWidth;
        console.log(_width)

        var biLi = _width / 100;

        var count = 0;
        var t = setInterval(function () {
            count++;
            oInner.style.width = count + 'px';
            oP.innerHTML = parseInt(count / biLi) + '%';   // 进度条会超过或者不足100%
            if (count >= _width) {
                clearInterval(t);
                // 如果除不尽，可以在结束的时候一定等于100%
                oP.innerHTML = 100 + '%';
                oInner.style.width = _width + 'px';
            }
        }, 10)




    </script>

</body>

</html>